<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>图片捕获</title>
  <link rel="stylesheet" href="../lib/layui/css/layui.css">
  <link rel="stylesheet" href="../styles/css/index.css">
  <style type="text/css">
    html,
    body {
      height: calc(100% - 2px);
      width: 100%;
    }

    .sanjiao {
      border: 7px solid red;
      width: 0;
      height: 0;
      border-top-color: transparent;
      border-left-color: transparent;
      border-bottom-color: transparent;
      position: absolute;
      top: 33%;
      right: 0px;
      cursor: pointer;
    }

    #list {
       /* width:100%; */
       height: 100%;
     }

    #list li {
      width: 170px;
      height: 255px;
      padding: 10px;
      background: #ccc;
      margin: 5px;
      float: left;
    }

    #list li p {
      padding: 2px;
      color: #fff;
    }

    #list li img {
      width: 100%;
      height: 200px;
    }
    #list,#page{
      width: 1000px;
      margin: 0 auto;
    }
    #page{
      padding: 0 25px;
    }
    .bewinput .layui-input{
      display: inline-block;
      width: 100px;
    }
    .fromOuter{
      padding:20px 20px 10px;
    }
    .content{
      margin:0 20px 20px;
      padding: 10px;
      box-shadow: 1px 1px 8px #CCCCCC;
    }
    .padding20{
      margin: 20px;
      padding: 10px;
    }
  </style>
</head>

<body>
  <div class="headTitle">
    图片捕获
  </div>
  <div class="sideListout">
    <div class="leftBox">
      <div id="test1"></div>
      <div class="hidden">
        <div class="sanjiao" state="false"></div>
      </div>
    </div>
    <div class="rightBox">
      <div class="layui-tab layui-tab-card" >
            <form action="" class="layui-form fromOuter">
              <div class="layui-form-item">
                <div class="layui-col-md10 ">
                  <label class="layui-form-label">捕获时间 ：</label>
                  <div class="layui-input-inline">
                    <input type="text" class="layui-input" id="test4" placeholder="请选择">
                  </div>
                  <label style="float: left;line-height: 38px;padding-right: 10px">至</label>
                  <div class="layui-input-inline">
                    <input type="text" class="layui-input" id="test5" placeholder="请选择">
                  </div>
                </div>
                <div class="layui-col-md2" style="text-align: center;">
                  <button class="layui-btn" lay-submit lay-filter="formDemo" onClick="search">查询</button>
                </div>
              </div>
            </form>
            <ul class="content " id="list" style="overflow: hidden;">
            </ul>
            <div id="page" ></div>
            <div class="padding20">
              <div class="headTitle">
                列表
              </div>
              <table id="demoTable"></table>
            </div>
      </div>
    </div>
  </div>
  <script src="../lib/layui/layui.js"></script>
  <script src="../lib/JQuery.js"></script>
  <script src="../js/index.js"></script>
  <script>
    var treeData = ''
    var dataList = [
        {
            id: '1',
            imgUrl: 'http://cdn.firstlinkapp.com/upload/2016_6/1465575923433_33812.jpg',
            imgurls: [{
                src: 'http://cdn.firstlinkapp.com/upload/2016_6/1465575923433_33812.jpg'
            },
                {
                    src: 'http://cdn.firstlinkapp.com/upload/2016_6/1465575923433_33812.jpg'
                },
                {
                    src: 'http://cdn.firstlinkapp.com/upload/2016_6/1465575923433_33812.jpg'
                },
                {
                    src: 'http://cdn.firstlinkapp.com/upload/2016_6/1465575923433_33812.jpg'
                },
                {
                    src: 'http://cdn.firstlinkapp.com/upload/2016_6/1465575923433_33812.jpg'
                },
                {
                    src: 'http://cdn.firstlinkapp.com/upload/2016_6/1465575923433_33812.jpg'
                }
            ]
        },
        {
            id: '2',
            imgUrl: 'http://cdn.firstlinkapp.com/upload/2016_6/1465575923433_33812.jpg',
            imgurls: [{
                src: 'http://cdn.firstlinkapp.com/upload/2016_6/1465575923433_33812.jpg'
            },
                {
                    src: 'http://cdn.firstlinkapp.com/upload/2016_6/1465575923433_33812.jpg'
                },
                {
                    src: 'http://cdn.firstlinkapp.com/upload/2016_6/1465575923433_33812.jpg'
                },
                {
                    src: 'http://cdn.firstlinkapp.com/upload/2016_6/1465575923433_33812.jpg'
                },
                {
                    src: 'http://cdn.firstlinkapp.com/upload/2016_6/1465575923433_33812.jpg'
                },
                {
                    src: 'http://cdn.firstlinkapp.com/upload/2016_6/1465575923433_33812.jpg'
                }
            ]
        },
        {
            id: '3',
            imgUrl: 'http://cdn.firstlinkapp.com/upload/2016_6/1465575923433_33812.jpg',
            imgurls: [{
                src: 'http://cdn.firstlinkapp.com/upload/2016_6/1465575923433_33812.jpg'
            },
                {
                    src: 'http://cdn.firstlinkapp.com/upload/2016_6/1465575923433_33812.jpg'
                },
                {
                    src: 'http://cdn.firstlinkapp.com/upload/2016_6/1465575923433_33812.jpg'
                },
                {
                    src: 'http://cdn.firstlinkapp.com/upload/2016_6/1465575923433_33812.jpg'
                },
                {
                    src: 'http://cdn.firstlinkapp.com/upload/2016_6/1465575923433_33812.jpg'
                },
                {
                    src: 'http://cdn.firstlinkapp.com/upload/2016_6/1465575923433_33812.jpg'
                }
            ]
        },
        {
            id: '4',
            imgUrl: 'http://cdn.firstlinkapp.com/upload/2016_6/1465575923433_33812.jpg',
            imgurls: [{
                src: 'http://cdn.firstlinkapp.com/upload/2016_6/1465575923433_33812.jpg'
            },
                {
                    src: 'http://cdn.firstlinkapp.com/upload/2016_6/1465575923433_33812.jpg'
                },
                {
                    src: 'http://cdn.firstlinkapp.com/upload/2016_6/1465575923433_33812.jpg'
                },
                {
                    src: 'http://cdn.firstlinkapp.com/upload/2016_6/1465575923433_33812.jpg'
                },
                {
                    src: 'http://cdn.firstlinkapp.com/upload/2016_6/1465575923433_33812.jpg'
                },
                {
                    src: 'http://cdn.firstlinkapp.com/upload/2016_6/1465575923433_33812.jpg'
                }
            ]
        },
        {
            id: '5',
            imgUrl: 'http://cdn.firstlinkapp.com/upload/2016_6/1465575923433_33812.jpg',
            imgurls: [{
                src: 'http://cdn.firstlinkapp.com/upload/2016_6/1465575923433_33812.jpg'
            },
                {
                    src: 'http://cdn.firstlinkapp.com/upload/2016_6/1465575923433_33812.jpg'
                },
                {
                    src: 'http://cdn.firstlinkapp.com/upload/2016_6/1465575923433_33812.jpg'
                },
                {
                    src: 'http://cdn.firstlinkapp.com/upload/2016_6/1465575923433_33812.jpg'
                },
                {
                    src: 'http://cdn.firstlinkapp.com/upload/2016_6/1465575923433_33812.jpg'
                },
                {
                    src: 'http://cdn.firstlinkapp.com/upload/2016_6/1465575923433_33812.jpg'
                }
            ]
        },
        {
            id: '5',
            imgUrl: 'http://cdn.firstlinkapp.com/upload/2016_6/1465575923433_33812.jpg',
            imgurls: [{
                src: 'http://cdn.firstlinkapp.com/upload/2016_6/1465575923433_33812.jpg'
            },
                {
                    src: 'http://cdn.firstlinkapp.com/upload/2016_6/1465575923433_33812.jpg'
                },
                {
                    src: 'http://cdn.firstlinkapp.com/upload/2016_6/1465575923433_33812.jpg'
                },
                {
                    src: 'http://cdn.firstlinkapp.com/upload/2016_6/1465575923433_33812.jpg'
                },
                {
                    src: 'http://cdn.firstlinkapp.com/upload/2016_6/1465575923433_33812.jpg'
                },
                {
                    src: 'http://cdn.firstlinkapp.com/upload/2016_6/1465575923433_33812.jpg'
                }
            ]
        },
        {
            id: '5',
            imgUrl: 'http://cdn.firstlinkapp.com/upload/2016_6/1465575923433_33812.jpg',
            imgurls: [{
                src: 'http://cdn.firstlinkapp.com/upload/2016_6/1465575923433_33812.jpg'
            },
                {
                    src: 'http://cdn.firstlinkapp.com/upload/2016_6/1465575923433_33812.jpg'
                },
                {
                    src: 'http://cdn.firstlinkapp.com/upload/2016_6/1465575923433_33812.jpg'
                },
                {
                    src: 'http://cdn.firstlinkapp.com/upload/2016_6/1465575923433_33812.jpg'
                },
                {
                    src: 'http://cdn.firstlinkapp.com/upload/2016_6/1465575923433_33812.jpg'
                },
                {
                    src: 'http://cdn.firstlinkapp.com/upload/2016_6/1465575923433_33812.jpg'
                }
            ]
        },
        {
            id: '5',
            imgUrl: 'http://cdn.firstlinkapp.com/upload/2016_6/1465575923433_33812.jpg',
            imgurls: [{
                src: 'http://cdn.firstlinkapp.com/upload/2016_6/1465575923433_33812.jpg'
            },
                {
                    src: 'http://cdn.firstlinkapp.com/upload/2016_6/1465575923433_33812.jpg'
                },
                {
                    src: 'http://cdn.firstlinkapp.com/upload/2016_6/1465575923433_33812.jpg'
                },
                {
                    src: 'http://cdn.firstlinkapp.com/upload/2016_6/1465575923433_33812.jpg'
                },
                {
                    src: 'http://cdn.firstlinkapp.com/upload/2016_6/1465575923433_33812.jpg'
                },
                {
                    src: 'http://cdn.firstlinkapp.com/upload/2016_6/1465575923433_33812.jpg'
                }
            ]
        }

    ]
    layui.use('laypage', function () {
      var laypage = layui.laypage;

      //执行一个laypage实例
      laypage.render({
        elem: 'page', //注意，这里的 test1 是 ID，不用加 # 号
        count: 50, //数据总数，从服务端得到
        jump: function (obj, first) {
          //obj包含了当前分页的所有参数，比如：
          console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
          console.log(obj.limit); //得到每页显示的条数
        }
      });
    });
    layui.use('laydate', function () {
      var laydate = layui.laydate;

        //时间选择器
        laydate.render({
            elem: '#test4'
            ,type: 'time'
            ,format:'HH:mm'
        });

        //时间选择器
        laydate.render({
            elem: '#test5'
            ,type: 'time'
            ,format:'HH:mm'
        });
    });
    layui.use('element', function () {
      var element = layui.element;
    });

    // 初始化默认查询
    // 执行一个表单
    layui.use('form', function () {
      var form = layui.form;

      //监听表单提交
      form.on('submit(formDemo)', function (data) {
        console.log(data)
        layer.msg(JSON.stringify(data.field));
        search(data.field)
        return false;
      });
    });

    // 使用一个树
    layui.use(['tree', 'util'], function () {
      var tree = layui.tree,
        layer = layui.layer,
        util = layui.util,
        // 树的数据
        nodes = [{
          title: '江西',
          id: 1,
          children: [{
            title: '南昌',
            id: 1000,
            children: [{
              title: '青山湖区',
              id: 10001
            }, {
              title: '高新区',
              id: 10002
            }]
          }, {
            title: '九江',
            id: 1001
          }, {
            title: '赣州',
            id: 1002
          }]
        }, {
          title: '广西',
          id: 2,
          children: [{
            title: '南宁',
            id: 2000
          }, {
            title: '桂林',
            id: 2001
          }]
        }, {
          title: '陕西',
          id: 3,
          children: [{
            title: '西安',
            id: 3000
          }, {
            title: '延安',
            id: 3001
          }]
        }]
      tree.render({
        elem: '#test1',
        data: nodes,
        showCheckbox: true,
        oncheck: function (obj) { //勾选时触发获取勾选数据
          alert(obj)
        },
        showLine: false, //是否开启连接线
        click: function (d) { // 点击分支回调
          treeData = d.data.id
        },
      });

    });

    //生成表单
    layui.use(['table'], function () {
      var table = layui.table;
      //第一个实例
      table.render({
        elem: '#demoTable',
        //					height: 315
        //  ,url: '/demo/table/user/' //数据接口
        //						,
        page: true //开启分页
          ,
        cols: [
          [ //表头
            {
              field: 'id',
              title: '设备标号',
              sort: true,
              align: 'center',
              fixed: 'left',
              width: '10%'
            }, {
              field: 'username',
              title: '采集时间',
              align: 'center',
            }, {
              field: 'sex',
              title: '土壤温度',
              align: 'center',
            }, {
              field: 'dklx',
              title: '土壤湿度',
              align: 'center',
            }, {
              field: 'city',
              title: '光照度',
              align: 'center',
            }, {
              field: 'sign',
              title: '空气温度',
              align: 'center',
            }, {
              field: 'experience',
              title: '空气湿度',
              width: '10%',
              align: 'center',
            }, {
              field: 'experience',
              title: '二氧化碳',
              align: 'center',
            }
          ]
        ],
        data: [
            { // 表格数据
          "id": "10001",
          "username": "地块",
          "email": "xianxin@layui.com",
          "sex": "男",
          "dklx": "水田",
          "city": "浙江杭州",
          "sign": "人生恰似一场修行",
          "experience": "116",
          "ip": "192.168.0.8",
          "logins": "108",
          "area": "价目是",
          "shzt": "2016-10-14"
        }, {
          "id": "10002",
          "username": "地块",
          "email": "xianxin@layui.com",
          "sex": "男",
          "dklx": "水田",
          "city": "浙江杭州",
          "sign": "人生恰似一场修行",
          "experience": "12",
          "ip": "192.168.0.8",
          "logins": "106",
          "area": "价目是",
          "shzt": "2016-10-14",
        }, {
          "id": "10003",
          "username": "地块",
          "email": "xianxin@layui.com",
          "sex": "男",
          "dklx": "水田",
          "city": "浙江杭州",
          "sign": "人生恰似一场修行",
          "experience": "65",
          "ip": "192.168.0.8",
          "logins": "106",
          "area": "价目是",
          "shzt": "2016-10-14"
        }, {
          "id": "10004",
          "username": "地块",
          "email": "xianxin@layui.com",
          "sex": "男",
          "dklx": "水田",
          "dklx": "水田",
          "city": "浙江杭州",
          "sign": "人生恰似一场修行",
          "experience": "666",
          "ip": "192.168.0.8",
          "logins": "106",
          "area": "价目是",
          "shzt": "2016-10-14"
        }, {
          "id": "10005",
          "username": "地块",
          "email": "xianxin@layui.com",
          "sex": "男",
          "dklx": "水田",
          "city": "浙江杭州",
          "sign": "人生恰似一场修行",
          "experience": "86",
          "ip": "192.168.0.8",
          "logins": "106",
          "area": "价目是",
          "shzt": "2016-10-14"
        }, {
          "id": "10006",
          "username": "地块",
          "email": "xianxin@layui.com",
          "sex": "男",
          "dklx": "水田",
          "city": "浙江杭州",
          "sign": "人生恰似一场修行",
          "experience": "12",
          "ip": "192.168.0.8",
          "logins": "106",
          "area": "价目是",
          "shzt": "2016-10-14"
        }, {
          "id": "10007",
          "username": "地块",
          "email": "xianxin@layui.com",
          "sex": "男",
          "dklx": "水田",
          "city": "浙江杭州",
          "sign": "人生恰似一场修行",
          "experience": "16",
          "ip": "192.168.0.8",
          "logins": "106",
          "area": "价目是",
          "shzt": "2016-10-14"
        }, {
          "id": "10008",
          "username": "地块",
          "email": "xianxin@layui.com",
          "sex": "男",
          "dklx": "水田",
          "city": "浙江杭州",
          "sign": "人生恰似一场修行",
          "experience": "106",
          "ip": "192.168.0.8",
          "logins": "106",
          "area": "价目是",
          "shzt": "2016-10-14"
        }, {
            "id": "10008",
            "username": "地块",
            "email": "xianxin@layui.com",
            "sex": "男",
            "dklx": "水田",
            "city": "浙江杭州",
            "sign": "人生恰似一场修行",
            "experience": "106",
            "ip": "192.168.0.8",
            "logins": "106",
            "area": "价目是",
            "shzt": "2016-10-14"
        }, {
            "id": "10008",
            "username": "地块",
            "email": "xianxin@layui.com",
            "sex": "男",
            "dklx": "水田",
            "city": "浙江杭州",
            "sign": "人生恰似一场修行",
            "experience": "106",
            "ip": "192.168.0.8",
            "logins": "106",
            "area": "价目是",
            "shzt": "2016-10-14"
        }, {
            "id": "10008",
            "username": "地块",
            "email": "xianxin@layui.com",
            "sex": "男",
            "dklx": "水田",
            "city": "浙江杭州",
            "sign": "人生恰似一场修行",
            "experience": "106",
            "ip": "192.168.0.8",
            "logins": "106",
            "area": "价目是",
            "shzt": "2016-10-14"
        }]
      });
    });
    search() //初始化查询数据
    // 渲染回调
    function search(data) {
      if (data) {
        //获取表单参数
        let params = {
          treeData: treeData || '',
          startTime: data.time || '',
          endTime: data.time1 || ''
        }
      }


      for (var i = 0; i < dataList.length; i++) {
          $('#list').append('<li><img onClick="clickImg(' + dataList[i].id + ')" src=' + dataList[i].imgUrl + ' />' +
              '<p>' + '陕陕西农民职业培训' + '</p><p>' + '[preset--003]' + '</p><p>' + '1092-3-21 12:02:34' + '</p></li> ');
          $("img").attr("index", i);
      }

    }

    function clickImg(index) {
        console.log(index)
        layer.photos({
            photos: {
                "data": dataList[index].imgurls
            }
            /*,anim: 1 //0-6的选择，指定弹出图片动画类型，默认随机*/
        });
    }
  </script>
</body>

</html>